<template>
  <div id="adjustSalaryrecords">
    <div class="pageTitle">
    <p >
      <el-select
        v-model="params.subId"
        placeholder="选择公司"
        @change="selectChange"
        style="width: 220px"
      >
        <el-option
          v-for="item in setCompanyList"
          :key="item.subid"
          :label="item.abbreviationName"
          :value="item.subid"
        >
        </el-option>
      </el-select>
    </p>
    </div>
    <div class="pageHead">
      <div class="pageLf">
        <div class="block">
          <el-select
            v-model="params.departmentid"
            placeholder="选择部门"
            clearable
          >
            <el-option
              v-for="item in sDepartment"
              :key="item.departmentid"
              :label="item.departmentName"
              :value="item.departmentid"
            >
            </el-option>
          </el-select>
        </div>
        <div class="block">
          <el-input
            v-model="params.noORname"
            placeholder="人员、工号"
          ></el-input>
        </div>
        <div class="block">
          <el-button type="primary" :loading="loading" @click="onserch"
            >搜索</el-button
          >
        </div>
        <div class="block">
          <el-popover placement="bottom" :width="400" trigger="click">
            <div class="pagegroup" style="padding: 20px 20px 20px 20px">
              <div class="lfTitle" style="display: flex; line-height: 50px">
                <p style="width: 80px; text-align: right">岗位：</p>
                <el-input
                  v-model="params.postname"
                  type="text"
                  clearable
                ></el-input>
              </div>
              <div class="lfTitle" style="display: flex; line-height: 50px">
                <p style="width: 100px; text-align: right">员工类型：</p>
                <el-select
                  v-model="params.registertype"
                  class="full-width-input"
                  clearable
                >
                  <el-option
                    v-for="item in registerTypeList"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <template #reference>
              <el-button type="text">更多</el-button>
            </template>
          </el-popover>
        </div>
      </div>
      <div class="pageRg">
        <div class="block">
          <el-button type="primary" @click="exportHis" :loading="loading1"
            >导出</el-button
          >
        </div>
      </div>
    </div>
    <div class="pageBox">
      <div class="tableContens">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="100%"
          class="pageInnerTable"
          v-loading="loading"
         
        >
          <el-table-column label="姓名 " prop="name"></el-table-column>
          <el-table-column prop="jobno" label="工号">
          </el-table-column>
          <el-table-column prop="departmentName" label="部门" >
          </el-table-column>
          <el-table-column prop="postname" label="岗位"> </el-table-column>
          <el-table-column prop="registertypeThs" label="员工类型">
          </el-table-column>
          <el-table-column prop="employeestateThs" label="员工状态">
          </el-table-column>
          <el-table-column prop="typeThs" label="定调薪类型"> </el-table-column>
          <el-table-column prop="startDate" label="生效日期">
            <template slot-scope="scope">
              <span>{{
                scope.row.startDate ? scope.row.startDate.substr(0, 10) : ""
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="effectiveThs" label="生效状态">
          </el-table-column>
          <el-table-column prop="statusThs" label="审批状态"> </el-table-column>
          <el-table-column prop="adjustmentBeforeAmount" label="调薪前金额" align="right">
          </el-table-column>
          <el-table-column prop="wagesTotal" label="调薪后金额" align="right">
          </el-table-column>
          <el-table-column prop="adjustmentRatio" label="调薪比例">
          </el-table-column>
          <el-table-column prop="reason" label="调薪原因"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span
                style="color: #409eff; cursor: pointer"
                @click="getDetail(scope.row)"
                >详情</span
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          @getTableData="getList"
          :total="total"
          :listQuery="listQuery"
          :pageSizes="pageSizes"
        />
      </div>
    </div>
    <!-- //详情 -->
    <el-dialog
      title="定薪"
      :visible.sync="isVisible"
      width="960px"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="content-box">
        <div class="title">
          <h3 style="font-weight: 700; color: black; font-size: 18px">
            {{ formData.name }}
          </h3>
          <p>
            <span>{{ formData.departmentName }} </span>&nbsp;<span
              style="font-size: 16px"
              >|</span
            >&nbsp;&nbsp;<span>{{ 
              formData.postname ? formData.postname : "未设定"
              
            }}</span>
          </p>
          <p>
            <span>{{ formData.registertype == 1 ? "全职" : "兼职" }}</span
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{{
              formData.startDate ? formData.startDate.substr(0, 10) : ""
            }}</span>
          </p>
        </div>
        <!-- 1是定薪 -->
        <div class="container-row" v-if="status == 1">
          <el-form
            :model="formData"
            label-position="right"
            label-width="120px"
            size="default"
          >
            <div
              v-for="(idx, index) in formData.salaryRecordDetailViews"
              :key="index"
            >
              <div class="static-content-item">
                <div style="font-size: 14px">
                  {{
                    idx.type == 1
                      ? "试用期工资"
                      : idx.type == 2
                      ? "转正后工资"
                      : ""
                  }}
                </div>
              </div>
              <el-row>
                <el-col
                  :span="8"
                  class="grid-cell"
                  v-for="item in idx.userSalaryBeforeItemDetailViews"
                  :key="item.salarycolumnId"
                >
                  <el-form-item
                    :label="item.salarycolumnName + '：'"
                    class="label-right-align"
                  >
                    <el-input
                      v-model="item.salaryAmount"
                      type="text"
                      clearable
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-divider></el-divider>
            </div>
          </el-form>
        </div>
        <!-- 2是调薪 -->
        <div class="content" v-else style="margin-top: 10px">
          <div
            v-for="(idx, index) in formData.salaryRecordDetailViews"
            :key="index"
          >
            <el-divider></el-divider>
            <el-table
              :data="idx.userSalaryBeforeItemDetailViews"
              style="width: 100%"
              :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }"
            >
              <el-table-column prop="salarycolumnName" label="工资项目">
              </el-table-column>
              <el-table-column prop="salaryBeforeAmount" label="调薪前金额">
              </el-table-column>
              <el-table-column prop="salaryAmount" label="调薪后金额">
              </el-table-column>
              <el-table-column prop="adjustmentRatio" label="调薪比例">
              </el-table-column>
            </el-table>
          </div>
          <div style="padding: 20px 20px 20px 20px">
            <el-form label-position="right" label-width="80px" size="default">
              <el-row>
                <el-col :span="8" class="grid-cell">
                  <el-form-item label="生效日期">
                    <span>{{
                      rowpick.startDate ? rowpick.startDate.substr(0, 10) : ""
                    }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="16" class="grid-cell">
                  <el-form-item label="调薪原因">
                    <el-input
                      v-model="rowpick.reason"
                      type="textarea"
                      disabled
                      clearable
                      maxlength="50"
                      show-word-limit
                      placeholder="说点什么来"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleClose">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/pagination.vue";
import { getDepartmentView, getCompanyList } from "@/util/xc/utils";
import requestList from "@/api/moduleApi_xc/management";
import { mapState } from "vuex";
export default {
  name: "adjustSalaryrecords", //定调薪记录
  components: {
    pagination,
  },
  data() {
    return {
      tableData: [],
      sDepartment: [],
      tableList: [{ name: "wujiahao " }],
      registerTypeList: [],
      pageSizes: [50, 100, 200, 500],
      listQuery: {},
      total: 0,
      loading: false,
      loading1: false,
      tableListArr: [
        { name: "基本工资 ", active: false, value: "" },
        { name: "正式工资 ", active: false, value: "" },
        { name: "试用工资 ", active: false, value: "" },
        { name: "工资合计", active: false, value: "" },
      ],
      isVisible: false, //dialog弹窗
      status: 1,
      rowpick: {},
      setCompanyList: [],
      params: {
        subId: "",
        noORname: "",
        departmentid: "",
        positionname: "",
        registertype: "", //员工类型，目前(全职：1，兼职：2)
        salaryType: 0, //1：未定薪 2：已定薪 3：已调薪
        pageIndex: 1,
        PageSize: 50,
      },
      formData: {},
    };
  },

  created() {
    getCompanyList();
  },
  mounted() {
    this.getinitSI();

    this.onparamsrecordList();
    this.getstatus();
  },
  methods: {
    async getinitSI() {
      const { data } = await this.$api.commonXc
        .initSubCompanyList()
        .then((res) => res.data);
      this.setCompanyList = data;
      this.params.subId =
        this.setCompanyList.length > 0 ? this.setCompanyList[0].subid : "";
      this.getCompany();
    },
    getstatus() {
      this.$api.commonXc.GetRegistertype().then((res) => {
        console.log("员工类型列表", res);
        if (res.status == 200) {
          this.registerTypeList = res.data.data;
        }
      });
    },
    //导出
    exportHis() {
      this.loading1 = true;
      let paramsLint = { ...this.params };
      console.log(paramsLint, 'paramsLint');
  
      Object.keys(paramsLint).forEach((item) => {
        if (paramsLint[item] == "") {
          delete paramsLint[item];
        }
      });
      requestList.expostHistory(paramsLint).then((res) => {
        let { data, status } = res.data;
        if (status == 200) {
          window.open(data);
          this.loading1 = false;
        } else {
          setTimeout(() => {
            this.loading1 = false;
          }, 3000);
        }
      });
    },
    // 初始化部门
    async getCompany() {
      this.sDepartment = [];
      this.params.departmentid = "";
      if (this.params.subId) {
        let { data } = await getDepartmentView(this.params.subId);
        this.sDepartment = data;
      }
    },
    //调薪记录列表
    async onparamsrecordList() {
      this.loading = true;
      let paramsLint = { ...this.params };
      Object.keys(paramsLint).forEach((item) => {
        if (paramsLint[item] == "") {
          delete paramsLint[item];
        }
      });
      try {
        let { data } = await requestList
          .Getrecord(paramsLint)
          .then((res) => res.data);
        this.loading = false;
        this.tableData = data.data;
        this.total = data.total;
      } catch (error) {
        setTimeout(() => {
          this.loading = false;
        }, 3000);
      }
    },
    //分页搜索
    getList(e, status) {
      if (status == "size") {
        this.params.PageSize = e;
      } else {
        this.params.PageIndex = e;
      }
      this.onparamsrecordList();
    },
    // 搜索
    onserch() {
      this.onparamsrecordList();
    },
    // 选择公司
    selectChange() {
      this.getCompany();
      this.onparamsrecordList();
    },
    // *关闭批量修改弹窗回调
    handleClose() {
      this.isVisible = false;
    },
    getDetail(row) {
      let { salaryId, typeThs } = row;
      this.isVisible = true;
      this.status = typeThs == "定薪" ? 1 : 2;
      requestList.GetrecordDetail({ salaryId }).then((res) => {
        let { data, status } = res.data;
        if (status == 200) {
          console.log(data, "data");
          this.formData = data;
          this.formData.salaryRecordDetailViews.map((item) => {
            this.rowpick = item;
            item.userSalaryBeforeItemDetailViews.push({
              salaryAmount: "",
              salarycolumnId: 888888888888888,
              salarycolumnName: "工资合计",
              salaryBeforeAmount: 0,
            });
            let sum = 0;
            let sum1 = 0;
            item.userSalaryBeforeItemDetailViews.forEach((idx) => {
              if (idx.salarycolumnName == "工资合计") {
                idx.salaryAmount = sum;
                idx.salaryBeforeAmount = sum1;
                idx.adjustmentRatio =
                  (Number(idx.salaryAmount) - Number(idx.salaryBeforeAmount)) /
                    Number(idx.salaryBeforeAmount) *
                  100;
                idx.adjustmentRatio = idx.adjustmentRatio.toFixed(2) + "%";
              } else {
                idx.status = false;
                sum += idx.salaryAmount = Number(idx.salaryAmount);
                sum1 += idx.salaryBeforeAmount = Number(idx.salaryBeforeAmount);
              }
            });
          });
        }
        console.log(
          this.formData.salaryRecordDetailViews,
          "this.formData.salaryRecordDetailViewsthis.formData.salaryRecordDetailViewsthis.formData.salaryRecordDetailViews"
        );
      });
    },
  },
};
</script>
<style lang="less" scoped>
#adjustSalaryrecords {
  .pageTitle {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: #ffffff;
    border: none;
    border-bottom: 1px solid #ebebeb;

    p {
      min-width: 240px;
      line-height: 30px;
    }
  }
  .pageHead {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10px;
    height: auto;
    .pageLf,
    .pageRg {
      display: flex;
      .block {
        margin-right: 1vw;
      }
    }
  }
  .container-row {
    padding: 20px 20px 20px 20px;
    .el-form-item {
      margin-bottom: 10px;
      font-size: 12px;
    }
  }

  .title {
    p,
    h3 {
      text-align: center;
      margin-top: 0.8vh;
    }
  }
  .pageBox {
    margin-top: 15px;
    width: 100%;
    height: calc(100% - 120px);
    float: left;
    position: relative;
    overflow: auto;
    .tableContens {
      height: calc(100% - 36px);
      position: relative;
      width: 100%;
      padding-right: 0;
    }
  }
}
</style>